// 一个简单的Vue单文件组件

<template>
  <!-- 这里用于定义Vue组件的模板内容 -->
  <!-- 还有模板里面必须包含子元素 否则会报错哦！ -->
  <!-- 简而言之， 这儿就是写html结构的 -->
  <!-- 还有一点忘了说了，Vue模板里面只允许放一个根节点后面的标签只能在根节点里面再次写，不能再次在模板中写根节点了！否则会报错！谨记！ -->
  <div>
    <h1>
      这是 App
      根组件【前面的在index.js中写的代码渲染对象不是index.html中的代码，而是在App.vue中的模板中【template】的代码，所以在前面的html中写的代码是不会渲染在页面上的！他只渲染【带有id值为app的】
    </h1>
    <div>我的家乡是荣昌</div>
  </div>
</template>

// 行为
<script>
// 这儿就是写js的逻辑代码的
export default {
  data() {
    return {}; // 私有数据
  },

  // ....其他业务逻辑

  methods: {}, // 处理函数
};
</script>

// 样式
// scope 可以防止样式之间的冲突问题
<style scoped>
/* 这里用于定义组件的样式  和css 里的就是一样的了！*/
h1 {
  color: red;
}
</style>

